<!--
公用进度条弹窗组件
监听弹窗关闭可 绑定close事件

-->
<template>
  <el-dialog :visible.sync="showUpload" width="380px" class="m-dialog"
             :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @close="close"
             @open="open">
    <div class="m-CompUploadDialog">
      <div class="layout-1" v-if="step == 'ing'">
        <el-progress type="circle" :percentage="percentage"></el-progress>
        <div class="words">{{tipWords.ing}}</div>
      </div>
      <div class="layout-2" v-if="step == 'success'">
        <svg-icon icon-class="update_success" class="icon"></svg-icon>
        <div class="words">{{type == '1'?'资料录入成功':tipWords.success}}</div>
      </div>
      <div class="layout-3" v-if="step == 'exception'">
        <svg-icon icon-class="update_fail" class="icon"></svg-icon>
        <div class="words">{{tipWords.exception}}</div>
      </div>
      <div slot="footer">
        <el-button @click="showUpload=false" :disabled="canClose" type="primary">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import * as Utils from '@/utils'
  export default {
    name: 'CompUploadDialog',
    data () {
      return {
        showUpload: false,
        tipWords: {
          exception: '资料解析失败',
          ing: '正在录入中...',
          success: '资料录入完成,反馈信息已自动下载',
        },
        percentage: 0,
        timer: null,
      }
    },
    methods: {
      close(){
        this.percentage = 0;
        if (this.timer) {
          window.clearInterval(this.timer);
        }
        this.$emit('update:show', false)
        this.$emit('update:step', 'ing')
      },
      open(){
        this.timer = setInterval(() => {
          if (this.percentage < 88) {
            this.percentage++;
          } else {
            window.clearInterval(this.timer);
          }
        }, 70)
      }
    },
    watch: {
      'show'(val){
        this.showUpload = val;
      },
      'step'(val){
        if (val == 'success') {
          this.percentage = 100;
        }
      }
    },
    props: {
      show: {
        default: false,
      },
      step: {
        default: 'ing',
      },
      type:{}
    },
    computed: {
      'canClose'(){
        if (this.step == 'success' || this.step == 'exception') {
          return false;
        } else {
          return true;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .icon {
    font-size: 56px;
    overflow: hidden;
  }
</style>
